<template>
    <div class="common-layout">
        <el-container>
            <el-header style="background-color: #545c64; color: #fff; line-height: 80px; border-bottom: 1px solid #eaeaea;">
                <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
                    <el-radio-button :value="false">expand</el-radio-button>
                    <el-radio-button :value="true">collapse</el-radio-button>
                </el-radio-group>
            </el-header>
            <el-container>
                <el-aside width="collapse" style="display: flex; background-color:#545c64 ;">
                    <el-menu active-text-color="#ffd04b" background-color="#545c64"
                        class="el-menu-vertical-demo" text-color="#fff" :collapse="isCollapse" @open="handleOpen"
                        @close="handleClose" router="true">
                        <el-sub-menu v-for="menu in treeData" :key="menu.id" :index="menu.id">
                            <template #title>
                                <el-icon><location /></el-icon>
                                <span>{{menu.name}}</span>
                            </template>
                            <el-menu-item v-for="child in menu.children" :key="child.id" :index="child.path">{{child.name}}</el-menu-item>
                        </el-sub-menu>
                        <!-- <el-sub-menu v-for="menu in menuData.filter(m => m.parentId === 0)" :key="menu.id" :index="menu.id">
                            <template #title>
                                <el-icon><location /></el-icon>
                                <span>{{menu.name}}</span>
                            </template>
                            <el-menu-item v-for="child in menuData.filter(m => m.parentId === menu.id)" :key="child.id" :index="child.path">{{child.name}}</el-menu-item>
                        </el-sub-menu> -->
                        <!-- <el-sub-menu index="1">
                            <template #title>
                                <el-icon><location /></el-icon>
                                <span>系统管理</span>
                            </template>
                            <el-menu-item index="/system/user">用户管理</el-menu-item>
                            <el-menu-item index="/system/role">角色管理</el-menu-item>
                            <el-menu-item index="/system/menu">菜单管理</el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="2">
                            <template #title>
                                <el-icon><icon-menu /></el-icon>
                                <span>用户设置</span>
                            </template>
                            <el-menu-item index="2-1">个人信息</el-menu-item>
                            <el-menu-item index="2-2">修改密码</el-menu-item>
                        </el-sub-menu>-->
                    </el-menu> 
                </el-aside>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup lang='ts'>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'
import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
} from '@element-plus/icons-vue'
//获得数据

const menuData = ref([])

const treeData = ref([])

onMounted(() => {
    axios.get("http://localhost:3000/sys_menu").then(response => {
        console.log(response.data)
        menuData.value = response.data
        treeData.value = arrayToTree(response.data)
    }).catch(error => {
        console.error("菜单请求失败:", error)
    })
    
})

interface Menu {
  id: number;
  name: string;
  icon: string;
  path: string;
  pid: number;
  children?: Menu[];
}



function arrayToTree(array, parentId = 0) {
    let result = [];
    for (let item of array) {
        if (item.parentId === parentId) {
            const children = arrayToTree(array, item.id);
            if (children.length) {
                item.children = children;
            }
            result.push(item);
        }
    }
    return result;
}
 



//开关菜单
const isCollapse = ref(false)

const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
</script>
<style scoped>
.common-layout {
    height: 100%;
    width: 100%;
}
.el-container {
    height: 100%;
    width: 100%;
}
.el-main{
    padding: 10px;
    background-color: #f2eeee;
}
.el-menu-vertical-demo{
    width: 100%;
    height: 100%;
    background-color: #545c64;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
}
</style>